# [Vue一]:了解Vue项目的建立
# 1.Vue环境的搭建
要想在电脑上新建和运行Vue项目，第一步要安装node.js,可以直接官网下载,建议安装推荐版本，相较于最新版本稳定，且最新版本可能存在一些未知的bug。安装node.js会默认自动安装npm（node.js package manage），后期开发个项目管理都是通过npm进行的。安装完成后在DOS中输入以下命令查看： 查看node.js版本：
node -v
查看npm版本：
npm -v
配置npm镜像可直接网上百度
安装vue/cli3：
npm install -g @vue/cli
注意：在vue-cli2.x版本都是用webpack进行vue项目的创建和管理，其项目的目录和结构与用vue/cli3.x创建的版本有很大不同，网上关于vue项目的创建大多是基于cli2.x使用webpack的。本人不建议再用webpack进行vue项目的创建管理，该博客用的是vue/cli3.x版本
创建vue项目——将dos切换到vue项目的路径下（cd切换）执行以下命令，出现要选择的时候直接enter选择默认，demo为要创建的vue项目名：
vue create demo
创建完成后你会看到如下目录(web前端开发本人使用的是vscode)：
进行到此一个vue项目就创建完成，在终端执行项目服务启动命令：
npm run serve
点击或者在浏览器中输入圈出的地址，一个vue的hello world项目就建立完成了：
# 2.vue目录结构逻辑解析（重点）
vue作为一个单页面布局的框架，顾名思义其只有一个index.html的页面，然后将其.vue组件通过DOM渲染到唯一的.html上实现单页面布局。下面我们通过一张图来对其逻辑进行说明：
（1）当访问改项目时，项目默认启动index.html文件，该html中只有一个div 并且id为‘app'。
（2）当index.html编译到id为‘app'元素时，发现在main.js中首先对vue和APP.vue进行了导入，Vue实例中首先时对APP.vue组件进行了待用，并且将其在div元素进行了渲染。
（3）mainjs中引用APP.vue组件，在APP.vue组件中，首先引入helloworld.vue作为其子组件，然后将子组件helloworld作为html元素在template模板中调用。
（4）通过APP.vue，最终将helloworld.vue中template渲染在index.html中
通过上面的分析总结出vue项目的基本逻辑为：
1.vue项目的入口为index.html；
2.main.js对index.html元素进行挂在和渲染；
3.main.js渲染的数据来自于APP.vue；
4.App.vue又是引用其子组件helloworld.vue中的数据。
最终通过层层调用的饭是钢hi将数据显示在页面中！
# 3.Vue基础知识传送门
欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程
← 目录 [Vue二]:简单登录界面的实现 →